 <template>
    <div class="index">
        <mt-navbar class="page-part nav flex p-lr-6" v-model="selected">
            <mt-tab-item id="1">本校</mt-tab-item>
            <mt-tab-item id="2">全国</mt-tab-item>
        </mt-navbar>
        <mt-tab-container v-model="selected" swipeable>
            <mt-tab-container-item id="1">
                <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" v-tap="test()">
                    <li v-for="list in News1">
                        <div class="width-75 news">
                            <router-link :to="{path:'/releaseNews',query:{mationId:list.mation.mationId}}">
                                <!--v-html="list.mation.body"-->
                                <h3 class="fs-32 c-s m-t-28">{{list.mation.title}}</h3>
                                <!--图片-->
                                <div class="m-t-28" v-if="list.mation.picture != null">
                                    <img :src="list.mation.picture" alt="" class="index-list-png">
                                </div>
                                <!--时间和阅读量-->
                                <div class="fs-22 p-tb-28">
                                    <span>来源:{{list.mation.source}}</span>
                                    <span class="rt">{{list.mation.createTime}}</span>
                                </div>
                            </router-link>
                            <!--下面的图标-->
                            <!--<div class="flex index-icon">
                                        <div>
                                            <img src="../img/share.png" alt="" class="index-list-icon"> &nbsp;
                                            <span class="fs-24">123</span>
                                        </div>
                                        <div>
                                            <img src="../img/message.png" alt="" class="index-list-icon"> &nbsp;
                                            <span class="fs-24">123</span>
                                        </div>
                                        <div>
                                            <img src="../img/share.png" alt="" class="index-list-icon"> &nbsp;
                                            <span class="fs-24">123</span>
                                        </div>
                                    </div>-->
                        </div>
                        <div class="index-blank">
                        </div>
                    </li>
                </ul>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" v-tap="test()">
                    <li v-for="list in News2">
                        <div class="width-75">
                            <router-link :to="{path:'/releaseNews',query:{mationId:list.mation.mationId}}">
                                <!--v-html="list.mation.body"-->
                                <h3 class="fs-32 c-s m-t-28">{{list.mation.title}}</h3>
                                <!--图片-->
                                <div class="m-t-28" v-if="list.mation.picture != null">
                                    <img :src="list.mation.picture" alt="" class="index-list-png">
                                </div>
                                <!--时间和阅读量-->
                                <div class="fs-22 p-tb-28">
                                    <span>来源:{{list.mation.source}}</span>
                                    <span class="rt">{{list.mation.createTime}}</span>
                                </div>
                            </router-link>
                            <!--下面的图标-->
                            <!--<div class="flex index-icon">
                                <div>
                                    <img src="../img/share.png" alt="" class="index-list-icon"> &nbsp;
                                    <span class="fs-24">123</span>
                                </div>
                                <div>
                                    <img src="../img/message.png" alt="" class="index-list-icon"> &nbsp;
                                    <span class="fs-24">123</span>
                                </div>
                                <div>
                                    <img src="../img/share.png" alt="" class="index-list-icon"> &nbsp;
                                    <span class="fs-24">123</span>
                                </div>
                            </div>-->
                        </div>
                        <div class="index-blank">
                        </div>
                    </li>
                </ul>
            </mt-tab-container-item>
        </mt-tab-container>
        <!--底部-->
         <!--底部-->
        <div>
            <div style="margin-bottom: 1rem">

            </div>
            <ul class="flex p-lr-6 footer">
                <li>
                    <router-link to="/index">
                        <img src="../img/news.png" alt="" class="footer-icon">
                        <p>资讯</p>
                    </router-link>
                </li>
                <li>
                    <router-link  to="/dynamic">
                        <img src="../img/dynamic.png" alt="" class="footer-icon">
                        <p>动态</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/release">
                        <img src="../img/choice.png" alt="" class="footer-icon-big">
                    </router-link>
                
                </li>
                <li>
                    <router-link to="/raise">
                        <img src="../img/raise.png" alt="" class="footer-icon">
                        <p>筹帮</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/unused">
                        <img src="../img/unused.png" alt="" class="footer-icon">
                        <p>闲置</p>
                    </router-link>
                </li>
            </ul>
        </div> 
    </div>
</template>
<script>
import { contrastDate, f } from '../assets/js/common'
export default {
    name: 'page-tab-container',
    data() {
        return {
            selected: '1',
            page: "0",   //学校资讯的页数
            page1: "1",  //全国资讯的页数
            News1: [],   //是学校资讯的数组
            News2: [],   //全国


        };

    },
    methods: {
        test() {
        },
        // 无线下拉
        loadMore() {
            this.loading = true;
            setTimeout(() => {
                if (this.selected == "1") {
                    this.page += 1;
                    this.News();
                } else {

                }
                this.loading = false;
            }, 500);
        },
        // 单个学校资讯
        News() {

            var params = new URLSearchParams();
            params.append("schoolId", localStorage.schoolId)
            params.append("page", this.page);
            params.append("rows", 4);

            this.$http({
                method: "post",
                url: localPath + '/mation/search2',
                data: params
            }).then((data) => {

                for (let i = 0; i < data.data.length; i++) {
                    data.data[i].mation.createTime = contrastDate(data.data[i].mation.createTime);
                    this.News1.push(data.data[i]);
                }
            }).catch((error) => {
                console.log(error);
            })

        },
        // 全国学校资讯
        AllNews() {

            var params = new URLSearchParams();
            params.append("page", this.page1);
            params.append("rows", 4);

            this.$http({
                method: "post",
                url: localPath + '/mation/search2',
                data: params
            }).then((data) => {

                for (let i = 0; i < data.data.length; i++) {
                    data.data[i].mation.createTime = contrastDate(data.data[i].mation.createTime);
                    this.News2.push(data.data[i]);
                }
                console.log(this.News2);
                // var arr = data.data.message.rows;

            }).catch((error) => {
                console.log(error);
            })

        }
    },
    directives: {
        tap: {
            // 指令的定义
            inserted: function(el) {
                el.focus()
            }
        }
    },
    mounted() {
        this.AllNews();
        // this.News();
        document.addEventListener(f());
    },
};



</script>
<style>
.mint-cell-wrapper {
    padding: 0px 0px;
}

.index-list-png {
    width: 2.20rem;
    height: 1.48rem;
    border-radius: 6px;
}

.index-icon {
    border-top: 1px solid #eeeeee;
    padding: .15rem .9rem;
}

.index-list-icon {
    width: .3rem;
    height: .3rem;
}

.index-blank {
    height: .2rem;
    background-color: #eeeeee;
}

.index-nav {
    padding: .3rem .6rem .2rem .6rem;
}

.news img {
    max-width: 100%;
}
/*导航条*/
.index .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 3px solid #c29354;
    color: #c29354;
    margin-bottom: 0px;
}
</style>

